<template>
  <a-card :title="$t('m.bpm.design.select_user_selected')" size="small" style="margin-left: 10px;">
    <ych-icon slot="extra" type="delete" @click="removeAll"/>
    <a-list :dataSource="value" size="small" bordered>
      <a-list-item slot="renderItem" slot-scope="item, index">
        <span>
          <span style="margin-right: 5px;">{{index+1}}</span>
          {{item.name}}
          <span v-if="item.deptName">/{{item.deptName}}</span>
        </span>
        <ych-icon v-if="item.script" slot="actions" @click="edit(item)" type="edit"/>
        <ych-icon slot="actions" @click="remove(item)" type="delete"/>
      </a-list-item>
    </a-list>

    <open-script-dialog ref="actionScriptDialog" @selectFinished="selectActionScriptFinished" help-code="customProcessActorForGroovy" :groovy="true"></open-script-dialog>
  </a-card>
</template>

<script>

  import OpenScriptDialog from "../../../eform/modules/actAppView/OpenScriptDialog";

  export default {
    name: 'SelectedArea',
    props: {
      value: {
        type: Array,
        required: true
      }
    },
    components:{
      OpenScriptDialog
    },
    data () {
      return {
        currentItem: null,
      }
    },
    methods: {
      removeAll () {
        this.$emit('input', [])
      },
      remove (removeItem) {
        if (removeItem.deptId) {
          const data = this.value.filter(item => (item.id + '#' + item.deptId) != (removeItem.id + '#' + removeItem.deptId))
          this.$emit('input', data)
        } else {
          const data = this.value.filter(item => item.id != removeItem.id)
          this.$emit('input', data)
        }
      },
      edit(item) {
        this.currentItem = item;
        this.$refs.actionScriptDialog.open(item.script || '')
      },
      selectActionScriptFinished(script) {
        if (script) {
          this.currentItem.script = script;
        } else {
          this.remove(this.currentItem);
        }
      },
    }
  }
</script>
